<template>
  <div class="hello">
    <header>
      <span><router-link to="/indexone"><img src=".././assets/tuceng10.png" alt=""></router-link></span>
      <div class="banne">
        <span><img src="../assets/xiaolian.png"></span>
        <span>
          <p>未登录</p>
          <p>登陆才能享受到优惠哦</p>
        </span>
        <span><router-link to="/denglu2">立即登录</router-link></span>
      </div>
    </header>
    <div class="nav">
      <ul>
        <li><router-link to="/indexone"><img src=".././assets/xiaoxi.png">消息</router-link></li>
        <li><router-link to="/indexone"><img src=".././assets/paihang.png">排行</router-link></li>
        <li><router-link to="/indexone"><img src=".././assets/tequan.png">特权</router-link></li>
      </ul>
    </div>
    <div class="fonter">
      <span>常用功能</span>
    </div>
    <div class="nav2">
      <ul>
        <li><router-link to="/indexone"><img src=".././assets/ditu.png">离线地图</router-link></li>
        <li><router-link to="/indexone"><img src=".././assets/yuyin (2).png">导航语音包</router-link></li>
        <li><router-link to="/indexone"><img src=".././assets/xingxing.png">收藏夹</router-link></li>
        <li><router-link to="/indexone"><img src=".././assets/dizhi.png">常用地址</router-link></li>
      </ul>
    </div>
    <div class="nav2">
      <ul>
        <li><router-link to="/indexone"><img src=".././assets/ditu.png">一路同行</router-link></li>
        <li><router-link to="/indexone"><img src=".././assets/yuyin (2).png">足迹</router-link></li>
        <li><router-link to="/indexone"><img src=".././assets/xingxing.png">行程</router-link></li>
        <li><router-link to="/indexone"><img src=".././assets/dizhi.png">助手</router-link></li>
      </ul>
    </div>
    <div class="fonter">
        <span>我的交易</span>
    </div>
    <div class="nav3">
      <ul>
        <li><router-link to="/indexone"><img src=".././assets/yuyin (2).png">足迹</router-link></li>
        <li><router-link to="/indexone"><img src=".././assets/xingxing.png">行程</router-link></li>
      </ul>
    </div>
  </div>


</template>

<script>
  export default {
    name: 'denglu'
  // data () {
  //   return {
  //     msg: 'Welcome woDe'
  //   }
  // }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .px2rem(@name, @px){
    @{name}: @px / 75 * 1rem;
  }
  body,html{
    width:100%;
  }
  .txh{
    display: flex;
    display: -webkit-flex;
  }
  .tan{
    display: -webkit-box;
    display: -moz-box;
  }
  @color: red;
  #app{
    header{
      .px2rem(height,250);
      background: #0068b7;
      img{
        .px2rem(width,18);
        .px2rem(height,37);
        .px2rem(margin,13);
      }
      .banne{
        .txh();
        justify-content: space-between;
        align-items: center;
        span{

          display: block;
        }
        span:first-child{
          img{
            .px2rem(width,144);
            .px2rem(height,144);
            .px2rem(margin-left,55);
          }
        }
        span:nth-child(2){

            p:first-child{
            .px2rem(font-size,36);
            color: #fff;
            }
            p:last-child{
            .px2rem(margin-top,24);
            .px2rem(font-size,26);
            color: #77a0cf;
            }
        }
        span:last-child{
          a{
          color: #fff;
          }
          .txh();
          justify-content: center;
          align-items: center;
          .px2rem(margin-right,35);
          .px2rem(width,164);
          .px2rem(height,58);
          .px2rem(font-size,30);
          border: 2px solid #fff;

        }
      }
    }
    .nav{
      ul{
        .txh();
        justify-content: space-between;
        align-items: center;
        li{
          display: block;
          text-align: center;
          img{
            .px2rem(margin-top,39);
            .px2rem(margin-bottom,20);
            display: block;
            .px2rem(width,54);
            .px2rem(height,49);
          }
        }
        li:first-child{
          .px2rem(margin-left,94);
        }
        li:last-child{
          .px2rem(margin-right,94);
        }
      }
    }
    .nav2{
      width: 100%;
      ul{
        width: 100%;
        .tan();
        li{
          -webkit-box-flex:1;
          list-style: none;
          .px2rem(margin-top,50);

          a{
            display: block;
            .tan();
            -webkit-box-orient: vertical;
            -webkit-box-align: center;
            -webkit-box-pack: center;
            // .px2rem(padding-top,10);
            // .px2rem(margin-bottom,25);
            color: #959595;
              img{
                .px2rem(width,54);
                .px2rem(height,60);
                display: block;
                .px2rem(margin-bottom,25);
              }

            }
            }
            li:first-child{
              .px2rem(margin-left,83);
              }
            li:last-child{
              .px2rem(margin-right,83);
              }
          }
    }
    .nav3{
      width: 100%;
      ul{
        width: 100%;
        .tan();

        li{

          list-style: none;
          .px2rem(margin-top,50);

          a{
            display: block;
            .tan();
            -webkit-box-orient: vertical;
            -webkit-box-align: center;
            -webkit-box-pack: center;
            // .px2rem(padding-top,10);
            // .px2rem(margin-bottom,25);
            color: #959595;
              img{
                .px2rem(width,54);
                .px2rem(height,60);
                display: block;
                .px2rem(margin-bottom,25);
              }

            }
            }
            li:first-child{
              .px2rem(margin-left,87);
              }
            li:last-child{
              .px2rem(margin-left,128);
              }

          }
    }
    .fonter{
      width: 100%;
      span{
        display: block;
        .px2rem(margin-top,83);
        .px2rem(margin-left,36);
        .px2rem(font-size,30);
      }
    }




  }
</style>
